<!DOCTYPE html>
<html>
<head>
  <title>jquery_table</title>
   <meta charset="utf-8"> 
</head>
<link rel="stylesheet" type="text/css" href="css/htlo.css">

<body>
   <table border="1">
    <thead>
          <tr>
           <th colspan="5" style="height:50px; background-color: red;color: #fff;font-size:25px;">表格</th>
          </tr>
          
            <tr>
              <th>序号</th>
              <th>商品</th>
              <th>单价</th>
              <th>数量</th>
              <th>操作</th>
            </tr>
      </thead>
       <tbody class="fee">
            <tr>
              <td class="feedn">1</td>
              <td>铅笔刀</td>
              <td class="feed">1.5元</td>
              <td>3</td>
              <td>
                <button class="delRow" onclick="delRow(this)">删除</button>
                <button class="delup" onclick="delup(this)">添加</button>
              </td>
            </tr>

            <tr>
              <td>2</td>
              <td>铅笔</td>
              <td>2.5元</td>
              <td>4</td>
              <td>
                <button class="delRow" onclick="delRow(this)">删除</button>
                <button class="delup" onclick="delup(this)">添加</button>
              </td>

            </tr>

            <tr>
              <td>3</td>
              <td>笔记本</td>
              <td>3.5元</td>
              <td>1</td>
              <td>
                <button class="delRow" onclick="delRow(this)">删除</button>
                <button class="delup" onclick="delup(this)">添加</button>
              </td>
            </tr>

            <tr>
              <td>4</td>
              <td>圆规</td>
              <td>5元</td>
              <td>2</td>
              <td>
                <button class="delRow" onclick="delRow(this)">删除</button>
                <button class="delup" onclick="delup(this)">添加</button>
              </td>

            </tr>
             <tr>
              <td>5</td>
              <td>教案本</td>
              <td>3.5元</td>
              <td>1</td>
              <td>
                <button class="delRow" onclick="delRow(this)">删除</button>
                <button class="delup" onclick="delup(this)">添加</button>
              </td>
            </tr>
                    <tr style="text-align: right;">
                   <th colspan="5">
                       <p>商品总计</p>
                    </th>
            </tr>
          </tbody>
    </table>
     <div class="show" style="display: none;">
      <div class="panel">
        <h3 class="header">商品数据列表</h3>
        <div class="inners">
          <input type="" name="good" value="" placeholder="请选择商品名称">
          <input type="" name="price" value="" placeholder="请选择商品数量">
          <input type="" name="num" value="" placeholder="请选择商品单价">
        
        <div class="options">
          <button class="poop">确定</button>
          <button class="ljio">取消</button>
        </div>
        <div class="cha">
          <em></em>
        </div>
      </div>
      </div>
    </div> 
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
      // $('tbody tr:odd').addClass('even');
      $('tbody tr:odd').css('background-color','#ccc');
      $('tbody tr:even').css('background-color','#fff');

      function delRow(bt){
               $(bt).parent().parent().remove();
               $('tbody tr').removeClass();
               $('tbody tr:odd').addClass('odd');

               for (var i = 0; i < $('tbody tr').length; i++) {
                 $('tbody tr:eq('+i+')').find('td:first').text(i+1);
               }
      }
      function delup(be){
        $(be).parent().parent().click(function(){
          $('.show').css('display','block');
        })
      } 
        var loop=function(){
          $('.show').css('display','block');        
      }       
      $('.cha, .ljio').click(function(){
          $('.show').hide();
          $('input[name=good]').val('');
          $('input[name=price]').val('');
          $('input[name=num]').val('');
      })
    
        

        $('.poop').click(function(){
          $('.show').hide();  
          var ntr= $('tbody tr').length;
          var sn= $('tbody tr:eq('+(ntr-2)+')').find('td:first').text();

          var good=$('input[name=good]').val();
          var price=$('input[name=price]').val();
          var num=$('input[name=num]').val(); 

          var tr=$('<tr><td>'+(parseInt(sn)+1)+'</td><td>'+good+'</td><td>'+price+'</td><td>'+num+'</td><td>\
          <button onclick="delRow(this)">删除</button> <button  onclick="delup(this)">添加</button></td></tr>');

          $('tbody tr:eq('+(ntr-2)+')').after(tr);
         });



    </script>   
</body>
</html>